<template>
  <div class="business">
    <div class="business-top" :class="{ 'ispc': mobile == 2 }">
      <div class="left-box">
        <img src="../../assets/images/ico_back2.png" alt="" class="back" @click="$router.go(-1)"/>
      </div>
      <div class="title">{{ title }}</div>
      <div class="right-box">
        <img src="../../assets/images/usdtrecord.png" alt="" class="record"
             @click="$router.push('/businessrecord')"/>
      </div>
    </div>
    <div class="business-con">
      <div class="business-info">
        <div class="info-box">
          <img class="info-box-icon" src="@/assets/images/photo3.png" alt="">
          <div>
            <div class="info-box-name">{{title}}</div>
          </div>
        </div>
        <div class="info-left">
          <div class="price" :class="{ color2: usdtinfo.color == 2 }">${{
              usdtinfo.closingPrice
            }}
          </div>
          <div class="num" :class="{ color2: usdtinfo.color == 2 }">
            {{ getPriceData(usdtinfo.openingPrice, usdtinfo.changeRate) }}
            ({{ usdtinfo.changeRate }}%)
          </div>
        </div>
        <!--                <div class="info-right">
                            <div class="info-item">
                                <div>{{ $t('new.desc51') }}</div>
                                <p>{{ usdtinfo.highestPrice }}</p>
                            </div>
                            <div class="info-item">
                                <div>{{ $t('new.desc52') }}</div>
                                <p>{{ usdtinfo.volume }}</p>
                            </div>
                            <div class="info-item">
                                <div>{{ $t('new.desc53') }}</div>
                                <p>{{ usdtinfo.lowestPrice }}</p>
                            </div>
                            <div class="info-item">
                                <div>{{ $t('new.desc54') }}</div>
                                <p>{{ usdtinfo.turnover }}</p>
                            </div>
                        </div>-->
      </div>
      <div class="de-line"></div>
      <div class="business-line">
        <div class="line-time">
          <div :class="{ timeact: timeAct == index }" v-for="(item, index) in timerLine" :key="item.id"
               @click="handlerLine(index)">
            {{ item.name }}
          </div>
        </div>
        <div id="echarts" ref="mychart"></div>
        <Vue-kline :klineData="lineList" :klineParams="klineParams" ref="callMethods"></Vue-kline>
      </div>
      <div class="business-order">
        <div class="order-type">
          <div :class="{ tabact: current == 0 }" @click="handlerList(0)">{{ $t('new.doc16') }}</div>
          <div :class="{ tabact: current == 1 }" @click="handlerList(1)">{{ $t('new.doc17') }}</div>
        </div>

        <van-list v-model="loading" :finished="finished" :loading-text="$t('load.loading')" @load="onLoad">
          <van-cell v-for="(item, index) in list" :key="index">
            <div class="order-info" @click="$router.push(`/recordinfo?sn=${item.sn}`)">
              <div class="type">
                <div v-if="item.status == 1">{{ $t('new.desc100') }}</div>
                <div v-else-if="item.status==0 && item.profitStatus=='-1' && item.timeInterval==0">
                  {{ $t('new.desc88') }}
                </div>
                <div v-else>
                  <p>{{ $t('new.desc90') }}</p>
                  <p>
                    <van-count-down :time="item.laveSeconds * 1000"
                                    @finish="handlerFinsh($event, item.sn, index)"/>
                  </p>
                </div>
              </div>
              <div class="info">
                <div class="info-icon">{{ item.coinPair }} <p v-if="item.type==0">{{ $t('new.desc62') }}</p>
                  <p class="iconcolor" v-else>{{ $t('new.desc63') }}</p></div>
                <div class="info-num">{{ $t('new.desc101') }}<span>{{ item.amount }}</span></div>
                <div class="info-price">
                  <p>{{ $t('new.desc101') }}<span>{{ item.buyPrice }}</span></p>
                  <p v-if="item.status==1">{{ $t('new.desc105') }}<span>{{ item.openingPrice }}</span></p>
                  <p v-else>{{ $t('new.desc102') }}<span>{{ item.currenPrice }}</span></p>
                </div>
              </div>
              <div class="time">
                <div class="date">{{ item.createTime }}</div>
                <div class="null-status" v-if="item.status==0">{{ $t('new.desc103') }}</div>
                <div class="money" :class="{color1:item.profitStatus==0}" v-else><span
                  v-if="item.profitStatus==0">+</span> <span v-else>-</span>{{ item.incomeAmount }}
                </div>
              </div>
            </div>
          </van-cell>
          <div class="null-data" v-if="showNull">
            <img src="../../assets/images/trade_empty.png" alt=""/>
            <p>{{ $t('toast.no_data') }}</p>
          </div>
        </van-list>

      </div>
    </div>
    <div class="business-footer" :class="{ 'ispc': mobile == 2 }">
      <div class="footer-btn1 flexcenter" @click="handlerBuy(0,0)">
        {{ $t('new.doc21') }}
      </div>
      <div class="footer-btn2 flexcenter" @click="handlerBuy(2,1)">{{ $t('new.doc22') }}</div>
    </div>
    <!-- 支付订单 -->
    <van-action-sheet v-model="showBuy" class="mkd-pop" :class="{ 'ispcmodal': mobile == 2 }" round>
      <img class="close" @click="showBuy=false" src="@/assets/images/close.png" alt="">
      <div class="content">
        <div class="business-buy">
          <div class="buy-info">
            <div class="info-list">
              <div class="item" :class="{ infoact: infocurrent == index }" v-for="(item, index) in configinfo"
                   :key="item.id" @click="handlerItem(item, index)">
                <div>{{ item.second }}S</div>
                <!--                <p>{{ $t('new.desc67') }}:{{ item.incomeRatio * 100 }}%</p>-->
              </div>
            </div>
            <div class="tab-state-box">
              <div class="tab1" :class="{active1:tabSelectIndex==0}" @click="tabSelect(0)">
                {{ $t('new.doc23') }}
              </div>
              <div class="tab2" :class="{active2:tabSelectIndex==1}" @click="tabSelect(1)">
                {{ $t('new.doc24') }}
              </div>
            </div>
            <div class="price-box">
              <div class="label">{{ $t('new.desc70') }}</div>
              <div class="value">${{ usdtinfo.closingPrice }}</div>
            </div>

            <van-field
              v-model="amount"
              right
              clearable
              type="number"
              :label="$t('new.doc25')"
              :placeholder="$t('new.desc73', { n1: seleconfig.min })"
              @change="handlerMoney"
            >
            </van-field>

            <div class="amount-profit">
              {{ $t('new.desc71') }} <span>{{ profit }}</span>
            </div>
            <!--                    <div class="info-btn">-->
            <!--                        <div class="flexcenter" @click="handlerBuyTab(0)">{{ $t('new.desc62') }}</div>-->
            <!--                        <div class="flexcenter" @click="handlerBuyTab(2)">{{ $t('new.desc63') }}</div>-->
            <!--                    </div>-->
            <div class="info-buy-btn flexcenter" @click="handlerSubmit">{{ $t('new.desc72') }}</div>
          </div>

        </div>
      </div>
    </van-action-sheet>
    <!-- 支付成功 -->
    <van-popup class="pay-success-box" v-model="showSuccess" :class="{ 'ispcmodal': mobile == 2 }" round
               :closeable="false">
      <div class="content">
        <div class="business-buy">

          <div class="name-box">
              {{payinfo.coinPair}}
          </div>

          <div class="circle">
            <van-circle v-model="currentRate"  layer-color="#F0F2F7" :rate="circlerate" :speed="1" color="#713FF5" size="200">
              <template #default="text">
                <div class="circle-text" v-if="payinfo.status == 0 && payinfo.laveSeconds > 0">{{ timetext
                  }}
                </div>
                <div class="circle-text1" v-else-if="payinfo.status == 0 && payinfo.laveSeconds == 0">
                  {{ $t('new.desc88') }}</div>
                <div class="circle-status" v-else-if="payinfo.status == 1">
                  <div>{{ $t('new.desc89') }}</div>
                  <p><span v-if="payinfo.profitStatus==0">+</span><span v-else>-</span>{{payinfo.incomeAmount}}</p>
                </div>

              </template>
            </van-circle>
          </div>



          <div class="tips" v-if="payinfo.status == 0">
            {{ $t('new.desc78') }}
            <span v-if="ismax == 0" style="color: #2ECA88">
              {{
              $t('new.desc79')
            }}</span>
            <span v-else  style="color: #EF5350;font-weight: bold">
              {{ $t('new.desc80') }}
            </span>
          </div>


          <div class="pay-price">
              <span class="label">
            {{ $t('new.desc82') }}
            </span>
            <span class="value">
             {{ usdtinfo.closingPrice }}
            </span>
          </div>

          <div class="pay-price">
            <span class="label">
              {{ $t('new.desc81') }}
            </span>
            <span class="value">
              {{ payinfo.buyPrice }}
            </span>
          </div>

          <div class="pay-price">
            <span class="label">
              {{ $t('bargain.time') }} :
            </span>
            <span class="value">
              {{ payinfo.createTime }}
            </span>
          </div>

          <div class="pay-price">
            <span class="label">
              {{ $t('new.doc25') }} :
            </span>
            <span class="value">
              {{ payinfo.amount }}
            </span>
          </div>



          <!--                <div class="pay-infobtn">-->
          <!--                    <div>{{ $t('new.desc83') }} <span v-if="payinfo.type == 2" style="color:#D23951">{{ $t('new.desc75')-->
          <!--                    }}</span> <span v-else style="color:#00BA7E">{{ $t('new.desc74') }}</span></div>-->
          <!--                    <div>{{ $t('new.desc84') }}{{ payinfo.amount }}</div>-->
          <!--                </div>-->
<!--          <div class="pay-moreinfobtn">
            <div :class="{ btn2: nextId != 0, btn1: nextId == '-1' }" @click="handlerNextOrder(0)">{{
                $t('new.desc85')
              }}
            </div>
            <div :class="{ btn3: nextId == 0, btn4: nextId > 0 }" @click="handlerNextOrder(1)">{{
                $t('new.desc86')
              }}
            </div>
          </div>
          <div class="par-next flexcenter" @click="handlerNextPay">{{ $t('new.desc87') }}</div>-->
        </div>
        <img class="close" @click="showSuccess=false" src="@/assets/images/close.png" alt="">
      </div>
    </van-popup>
    <!-- 交易密码 -->
    <setTrade :hasTrue="info.hasSetPassword" v-if="showSet" :showSet="showSet" @handlerClose="handlerClose">
    </setTrade>
  </div>
</template>

<script>
const upColor = '#00da3c';
const downColor = '#ec0000';
import VueKline from "vue-kline";

export default {
  components: {
    VueKline,
  },
  data() {
    return {
      klineParams: {
        theme: "light",
        language: "zh-cn",
        depthWidth: 30,
        count: 1,
        height: 400,
      },
      info: {},
      showSet: false,
      mobile: localStorage.getItem('ismobile'),
      timeAct: 0,
      timetext: '',
      circlerate: 0,
      currentRate: 0,
      showSuccess: false,
      showBuy: false,
      title: '',
      socket: null,
      code: '',
      time: '1min',
      usdtinfoname: '',
      usdtlinename: '',
      usdtinfo: {
        buyCoinName:'',
        sellCoinName:'',
        closingPrice: 0,
        changeRate: 0,
        color: 0,
        highestPrice: 0,
        volume: 0,
        lowestPrice: 0,
        turnover: 0,
        sellCoinId: 1
      },
      usdtline: [],
      buyCoinId: 0,
      current: 0,
      finished: false,
      loading: false,
      list: [],
      page: 1,
      configinfo: [],
      buytype: 0,
      infocurrent: 0,
      seleconfig: {},
      amount: '',
      totalMoney: 0,
      isbtn: true,
      sellCoinId: 1,
      payinfo: {},
      timerNull: null,
      userOrderlist: [],
      nextId: 0,
      showNull: false,
      timerLine: [
        {
          id: '',
          name: this.$t('new.desc118')
        },
        {
          id: '1min',
          name: this.$t('new.desc119')
        },
        {
          id: '5min',
          name: this.$t('new.desc120')
        },
        {
          id: '15min',
          name: this.$t('new.desc121')
        },
        {
          id: '30min',
          name: this.$t('new.desc122')
        }, {
          id: '60min',
          name: this.$t('new.desc123')
        }, {
          id: '1day',
          name: this.$t('new.desc124')
        }, {
          id: '1week',
          name: this.$t('new.desc125')
        }, {
          id: '1mon',
          name: this.$t('new.desc126')
        }
      ],
      lineList: {},
      status: 0,
      tabSelectIndex: 0
    }
  },
  created() {
    this.title = this.$route.query.id;
    this.code = this.$route.query.code;
    this.buyCoinId = this.$route.query.coinid;
    this.sellCoinId = this.$route.query.sellCoinId;
    localStorage.setItem("bussinessInfo_title",this.$route.query.id)
    localStorage.setItem("bussinessInfo_code",this.$route.query.code)
    localStorage.setItem("bussinessInfo_coinid",this.$route.query.coinid)
    localStorage.setItem("bussinessInfo_sellCoinId",this.$route.query.sellCoinId)
  },
  mounted() {
    this.getData();
    this.getconfig();
    this.getMoney();
    this.$post(this.URL.member.personal, {}).then(res => {
      if (res.code == 0) {
        this.info = res.data
      } else {
        this.$toast(res.message)
      }
    })
    let lang = localStorage.getItem('language');
    if (lang == 'zh') {
      lang = 'zh-cn'
    } else {
      lang = 'en-us'
    }
    this.$refs.callMethods.setLanguage(lang)
    // this.$refs.callMethods.resize(this.$refs.mychart.offsetWidth, this.$refs.mychart.offsetHeight)

  },
  computed: {
    ismax() {
      let num = 0;
      if (this.payinfo.buyPrice != undefined) {
        if (parseFloat(this.payinfo.buyPrice) - parseFloat(this.usdtinfo.closingPrice) > 0) {
          num = 1;
        }
      }
      return num;
    },
    profit() {
      let total = 0;
      if (this.amount != '') {
        total = this.amount * this.seleconfig.incomeRatio;
        total = total.toFixed(2)
      }
      return total;
    }
  },
  methods: {
    tabSelect(index) {
      this.tabSelectIndex = index
    },
    getPriceData(openingPrice, changeRate) {
      let value = (openingPrice * changeRate / 100).toFixed(2)
      if (value > 0) {
        return "+" + value
      } else {
        return value
      }
    },
    handlerLine(i) {
      let time = this.timerLine[i].id;
      if (time == '') {
        time = this.timerLine[1].id
      }
      this.time = time;
      this.timeAct = i;
      this.lineList = {};
      this.socket.close();
      this.getData()
    },

    handlerClose() {
      this.showSet = false;
      this.$post(this.URL.member.personal, {}).then(res => {
        if (res.code == 0) {
          this.info = res.data
        } else {
          this.$toast(res.message)
        }
      })
    },
    handlerFinsh(e, sn, i) {
      this.$post(this.URL.user.orderinfo, {
        sn: sn
      }).then(res => {
        if (res.code == 0) {
          this.list[i] = res.data;
          this.userOrderlist = this.list;
        }
      })
    },
    handlerNextOrder(i) {
      let nexti = this.userOrderlist.findIndex(item => item.sn == this.payinfo.sn);
      if (nexti >= 0 && i == 0) {
        this.getorderInfo(this.userOrderlist[nexti + 1].sn);
        this.nextId = nexti + 1;
      } else if (nexti == this.userOrderlist.length - 1 && i == 0) {
        this.nextId = '-1'
      } else if (nexti == 0 && i == 1) {
        this.nextId = 0;
      } else {
        this.getorderInfo(this.userOrderlist[nexti - 1].sn);
        this.nextId = nexti - 1;
      }
      clearInterval(this.timerNull)
    },
    handlerNextPay() {
      clearInterval(this.timerNull);
      this.showSuccess = false;
      this.showBuy = true;
      this.amount = '';
    },
    getMoney() {
      this.$post(this.URL.withdrawal.wallet, {}).then(res => {
        if (res.code == 0) {
          this.totalMoney = res.data.totalUSDTBalance
        }
      })
    },
    handlerSubmit() {
      let _this = this;

      if (this.amount > parseFloat(this.totalMoney)) {
        this.$toast(this.$t('new.desc76'))
        return;
      }
      if (this.isbtn) {
        this.isbtn = false;
        this.$post(this.URL.user.parOrder, {
          type: this.tabSelectIndex == 0 ? 0 : 2,//this.buytype
          configId: this.seleconfig.id,
          amount: this.amount,
          buyCoinId: this.buyCoinId,
          sellCoinId: this.sellCoinId
        }).then(res => {
          if (res.code == 0) {
            this.isbtn = true;
            this.showBuy = false;
            this.showSuccess = true;
            console.log("====resdata",res.data)
            this.getTimer(res.data);
            this.getMoney();
            this.list = [];
            this.page = 1;
            this.finished = false;
            this.loading = false;
            this.onLoad();
          } else {
            this.$toast(res.message)
            this.isbtn = true;
          }
        })
      }
    },
    handlerList(i) {
      this.status = i;
      this.current = i;
      this.list = [];
      this.page = 1;
      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    getTimer(info) {
      let _this = this, timenum = info.timeInterval;
      this.payinfo = info;
      _this.timerNull = setInterval(() => {
        if (_this.payinfo.laveSeconds == 0) {
          clearInterval(_this.timerNull);
          _this.getorderInfo(_this.payinfo.sn)
        } else {
          _this.payinfo.laveSeconds--;
          let rate = parseFloat((timenum - this.payinfo.laveSeconds) / timenum) * 100
          rate = rate.toFixed(0)
          _this.circlerate = parseFloat(rate);
          _this.currentRate = parseFloat(rate)
          _this.timetext = `${_this.payinfo.laveSeconds}`;
        }
      }, 1000)
    },
    getorderInfo(sn) {
      this.$post(this.URL.user.orderinfo, {
        sn: sn
      }).then(res => {
        if (res.code == 0) {
          this.payinfo = res.data;
          if (this.payinfo.laveSeconds > 0) {
            this.getTimer(this.payinfo)
          }
        }
      })
    },
    handlerBuyTab(i) {
      this.buytype = i;
      this.getconfig(1);
    },
    handlerItem(item, i) {
      this.seleconfig = item;
      this.infocurrent = i;
    },
    handlerMoney(val) {
      if (this.amount > parseFloat(this.seleconfig.max)) {
        this.amount = this.seleconfig.max;
      }
    },
    handlerBuy(i, tabSelect) {
      this.tabSelectIndex = tabSelect
      this.buytype = i;
      this.getconfig(0);
      this.showBuy = true;
      this.amount = '';
      this.infocurrent = 0;
    },
    getconfig() {
      this.$post(this.URL.member.iconconfig, {
        buyCoinId: this.buyCoinId,
        type: this.buytype
      }).then(res => {
        if (res.code == 0) {
          this.configinfo = res.data;
          if (!this.infocurrent) {
            this.seleconfig = res.data[0]
          } else {
            this.seleconfig = res.data[this.infocurrent]
          }

        }
      })
    },
    onLoad() {
      setTimeout(() => {
        this.showNull = false;
        this.$post(this.URL.user.order, {
          page: this.page,
          status: this.status
        }).then(res => {
          if (res.code == 0) {
            if (res.data.list != '') {
              res.data.list.forEach(e => {
                e.coinPair = e.coinPair.replace('/USDT', '')
              })
            }


            if (this.page == 1) {
              this.list = res.data.list
            } else {
              this.list = this.list.concat(res.data.list)
            }
            this.list = this.list.slice(0, 5)
            if (this.list.length == 0) {
              this.showNull = true;
            }
            if (res.data.list.length > 9) {
              this.page++;
            }
            this.loading = false;
            this.finished = true;
          } else {
            this.$toast(res.message)
          }
        })
      }, 500);
    },
    getData() {
      let _this = this;
      if (typeof WebSocket == "undefined") {
      } else {
        _this.socket = new WebSocket(process.env.WSS_URL_API)
        _this.usdtinfoname = `market_info_${_this.code}`;
        _this.usdtlinename = `market_kline_${_this.code}_${_this.time}`;
        _this.socket.onopen = function () {
          _this.socket.send(`start:topic=${_this.usdtinfoname}`);
          _this.socket.send(`start:topic=${_this.usdtlinename}`);
        };
        //获得消息事件
        _this.socket.onmessage = function (msg) {

          let data = JSON.parse(msg.data);
          if (data.data != undefined) {
            if (data.topic == _this.usdtinfoname) {
              let color = 0;
              if (parseFloat(_this.usdtinfo.closingPrice) < parseFloat(data.data.closingPrice)) {
                color = 2
              } else {
                color = 0
              }
              _this.usdtinfo = {
                buyCoinName:data.data.buyCoinName,
                sellCoinName:data.data.sellCoinName,
                openingPrice: data.data.openingPrice,
                closingPrice: data.data.closingPrice,
                changeRate: data.data.changeRate,
                highestPrice: data.data.highestPrice,
                volume: data.data.volume,
                lowestPrice: data.data.lowestPrice,
                turnover: data.data.turnover,
                color: color,
                sellCoinId: data.data.sellCoinId == null ? _this.usdtinfo.sellCoinId : data.data.sellCoinId
              }

            } else {
              let lineAll = data.data, lines = [], asks = [], bids = [];
              if (lineAll.length > 20) {
                lineAll.forEach(e => {
                  let arr = [e.timestamp, parseFloat(e.openingPrice), parseFloat(e.highestPrice), parseFloat(e.lowestPrice), parseFloat(e.closingPrice), parseFloat(e.volume)]
                  lines.push(arr)
                  bids.push([e.turnover, e.volume])
                })
                _this.lineList = {
                  'success': true,
                  'data': {
                    'depths': {
                      'asks': [],
                      'bids': bids
                    },
                    'lines': lines
                  }
                }
                _this.$refs.callMethods.redraw();
                _this.$refs.callMethods.kline.chartMgr.getChart().updateDataAndDisplay(_this.lineList.data.lines)
              }



            }
          }
        };
        //关闭事件
        _this.socket.onclose = function () {
          console.log('关闭')
          // _this.getData();
        };
        //发生了错误事件
        _this.socket.onerror = function () {
          //_this.getData();
          console.log('错误')
          //此时可以尝试刷新页面
        };
      }
    }
  },
  destroyed() {
    this.socket.close()
  }
}
</script>

<style lang="less" scoped>
.business {
  min-height: 100vh;
  background: rgba(247, 249, 252, 1);

  .business-top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 1.04rem;
    background: #fff;
    z-index: 6;
    text-align: center;
    line-height: 1.04rem;
    display: flex;
    align-items: center;

    .right-box, .left-box {
      width: 1.02rem;
      height: .64rem;
      display: flex;
      align-items: center;
      flex-shrink: 0;

    }

    .back {
      width: 1.02rem;
      height: .64rem;
      margin-left: 10px;
    }

    .title {
      flex: 1;
      font-size: .4rem;
      color: rgba(50, 50, 50, 1);
      align-items: center;
    }

    .right-box {
      .record {
        width: .48rem;
        height: .48rem;
        top: -0.08rem;
        position: relative;
        align-self: flex-end;
      }

      display: flex;
      justify-content: flex-end;
      padding-right: 10px;
    }

  }

  .business-con {
    padding: .98rem 0 1.5rem;
    background: #fff;

    .business-info {
      padding: .32rem;
      background: #fff;
      display: flex;

      .info-box {
        flex: 0 0 50%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        &-icon {
          width: .96rem;
          height: .96rem;
          margin-right: 10px;
        }

        &-name {
          font-size: .32rem;
          color: rgba(74, 76, 82, 1);
        }
      }

      .info-left {
        flex: 0 0 50%;

        .name {
          font-size: .26rem;
          color: #737B8D;
          text-align: right;
        }

        .price {
          height: .85rem;
          line-height: .85rem;
          font-size: .46rem;
          color: #F5435A;
          text-align: right;
        }

        .num {
          font-size: .28rem;
          color: #F5435A;
          text-align: right;
        }

        .color2 {
          color: #00BA7E;
        }
      }

      .info-right {
        flex: 0 0 50%;
        display: flex;
        flex-wrap: wrap;

        .info-item {
          flex: 0 0 50%;
          margin-bottom: .26rem;
          font-size: .2rem;
          color: #737B8D;

          &:nth-last-child(-n+2) {
            margin-bottom: 0;
          }

          div {
            margin-bottom: .14rem;
          }

          p {
            font-size: .22rem;
            color: #FFFFFF;
            word-break: break-all;
          }
        }
      }
    }

    .de-line {
      height: 1px;
      opacity: 1;
      background: rgba(240, 242, 247, 1);
      margin: .2rem 0px;
    }

    .business-line {
      display: flex;
      width: 100%;
      height: 8.5rem;
      overflow: hidden;
      flex-direction: column;
      background: rgba(247, 249, 252, 1);

      .line-time {
        display: flex;
        padding: 0 .1rem;
        padding-bottom: .2rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        font-size: .22rem;
        color: rgba(164, 169, 179, 1);
        background: #fff;

        div {
          position: relative;
          margin-right: .2rem;
          display: flex;
          justify-content: center;
          align-items: center;
          min-width: 1rem;
          height: .64rem;
          background: rgba(240, 242, 247, 1);
          flex-shrink: 0;
          border-radius: 15px;

          &:last-child {
            margin-right: 0;
          }
        }

        .timeact {
          background: rgba(113, 63, 245, 1);
          color: #fff;
        }
      }

      #echarts {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6.58rem;
        z-index: -5;
      }
    }

    .business-order {
      padding: 0 .2rem;
      background: rgba(247, 249, 252, 1);
      position: relative;
      margin-top: -10px;

      .order-type {
        display: flex;
        padding: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid #ebebeb;

        div {
          text-align: center;
          font-size: .28rem;
          color: rgba(73, 76, 86, 0.7);
          position: relative;
          margin-right: 20px;
        }

        .tabact {
          color: rgba(73, 97, 234, 1);

          &::after {
            content: '';
            position: absolute;
            bottom: -.2rem;
            left: 0;
            width: 100%;
            height: 0.05rem;
            background: rgba(73, 97, 234, 1);
            border-radius: .1rem;
          }
        }
      }

      .order-info {
        display: flex;
        padding: .3rem .2rem !important;
        justify-content: space-between;
        overflow: hidden;
        background: #fff;
        border-radius: 10px;
        margin-bottom: 10px;

        .type {
          flex: 0 0 .8rem;
          padding-right: .2rem;
          margin-top: .2rem;
          font-size: .24rem;
          display: none;
          color: #666666;

          /deep/ .van-count-down {
            font-size: .2rem;
          }
        }

        .info {
          flex: 0 0 3.3rem;

          .info-icon {
            color: #000;
            display: flex;
            font-size: .3rem;

            p {
              height: .36rem;
              margin: 0.05rem 0 0 .2rem;
              background: #5EBA89;
              padding: 0 .2rem;
              line-height: .36rem;
              font-size: .2rem;
              color: #fff;
              border-radius: 0.08rem;
            }

            .iconcolor {
              background: #FF383A;
            }
          }

          .info-num, .info-price {
            display: flex;
            font-size: .22rem;
            color: #999999;

            span {
              color: #666666;
            }
          }

          .info-price p:first-child {
            margin-right: .2rem;
          }
        }

        .time {
          text-align: right;

          .date {
            font-size: .24rem;
            color: #999999;
            word-break: break-all;

          }

          .money {
            padding: 0.43rem 0 0 0;
            font-size: .32rem;
            color: #FF383A;
          }

          .color1 {
            color: #5EBA89;
          }

          .null-status {
            margin-top: .3rem;
            color: #333;
          }
        }
      }


      .null-data {
        padding: .5rem 0;
        text-align: center;
        font-size: .26rem;
        color: #737B8D;

        img {
          width: 1.4rem;
          margin-bottom: .2rem;
        }
      }

      /deep/ .van-cell {
        padding: 0;
        background-color: rgba(0, 0, 0, 0);

        &::after {
          border-bottom: 0.02rem solid rgba(255, 255, 255, 0.1);
          left: 0;
          right: 0;
        }

      }
    }
  }

  .business-footer {
    position: fixed;
    bottom: 0.2rem;
    left: 0;
    width: 100%;
    padding: .16rem 0;
    display: flex;
    justify-content: center;
    font-size: .32rem;
    color: #FFFFFF;

    .footer-btn1 {
      flex: 0 0 3.5rem;
      height: 0.88rem;
      background: url('../../assets/images/buy_up.png') center no-repeat;
      background-size: 100% 100%;
    }

    .footer-btn2 {
      flex: 0 0 3.5rem;
      height: 0.88rem;
      background: url('../../assets/images/buy_down.png') center no-repeat;
      background-size: 100% 100%;
    }
  }
}

/deep/ .van-popup {
  background-color: rgba(0, 0, 0, 0.5);
}

.business-buy {
  .title {
    padding: .33rem;
    color: rgba(35, 37, 48, 1);
    font-size: .36rem;
    text-align: center;
    border-bottom: 0.01rem solid rgba(255, 255, 255, 0.2);
  }

  .tips {
    margin-top: 10px;
    font-size: .28rem;
    color: rgba(35, 37, 48, 1);
    display: flex;
    justify-content: space-between;
  }

  .circle {
    text-align: center;

    /deep/ .van-circle {
      width: 1.8rem !important;
      height: 1.8rem !important;
    }

    .circle-text {
      font-size: 0.5rem;
      color: rgba(35, 37, 48, 1);
      line-height: 1.5rem;
    }

    .circle-text1 {
      font-size: 0.32rem;
      color: rgba(35, 37, 48, 1);
      line-height: 1.5rem;
    }

    .circle-status {
      font-size: .26rem;
      color: #000;

      div {
        padding: .4rem 0 0;
      }

      p {
        font-size: .3rem;
      }
    }
  }

  .pay-price {
    padding-top: .2rem;
    font-size: 16px;
    color: #000;
    display: flex;
    justify-content: space-between;
    span {
      color: #4A4C52;
    }
  }

  .pay-infobtn {
    display: flex;
    padding: 0.2rem .2rem .1rem;
    justify-content: space-between;

    div {
      flex: 0 0 48%;
      height: .6rem;
      line-height: .54rem;
      color: #000;
      background: rgba(214, 217, 221, 0.1);
      border: 0.02rem solid rgba(255, 255, 255, 0.3);
      text-align: center;
      border-radius: .08rem;
    }


  }

  .btn1 {
    line-height: .54rem;
    background: none !important;
    border: 0.02rem solid #fff !important;
  }

  .btn2 {
    line-height: .54rem;
    background: none !important;
    border: 0.02rem solid #3b63da !important;
  }

  .btn3 {
    line-height: .6rem;
    background: rgba(255, 255, 255, 0.3) !important;
    border: 0 !important;
  }

  .btn4 {
    line-height: .6rem;
    background: #3b63da !important;
    border: 0 !important;
  }

  .par-next {
    width: 5.6rem;
    height: .8rem;
    margin: .2rem auto 0;
    background: #FFA029;
    color: #000;
    font-size: .28rem;
    border-radius: 0.08rem;
  }

  .pay-moreinfobtn {
    padding: 0 .2rem;
    display: flex;
    justify-content: space-between;

    div {
      flex: 0 0 48%;
      height: .6rem;
      line-height: .6rem;
      color: #fff;
      background: rgba(214, 217, 221, 0.1);
      border: 0.02rem solid rgba(255, 255, 255, 0.3);
      text-align: center;
      border-radius: .08rem;
    }
  }

  .buy-info {
    padding: 0 .2rem;

    .info-title {
      padding: .29rem 0 .2rem;
      font-size: .26rem;
      color: #fff;
    }

    .info-list {
      display: flex;
      flex-wrap: wrap;

      .item {
        margin-right: 10px;
        height: 32px;
        line-height: 32px;
        min-width: 47px;
        padding: 0 5px;
        color: rgba(164, 169, 179, 1);
        background: rgba(240, 242, 247, 1);
        box-sizing: border-box;
        text-align: center;
        font-size: 12px;
        border-radius: 10px;
        margin-bottom: .2rem;

        &:last-of-type(-n+3) {
          margin-bottom: 0;
        }

        &:nth-child(3n) {
          margin-right: 0;
        }

      }

      .infoact {
        background: rgba(113, 63, 245, 1);
        color: #fff;
      }
    }

    .tab-state-box {
      display: flex;
      margin-top: 10px;

      .tab1 {
        flex: 1;
        background: rgba(240, 242, 247, 1);
        height: 60px;
        border-radius: 8px;
        margin-right: 10px;
        color: rgba(164, 169, 179, 1);
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .active1 {
        color: #fff;
        background: rgba(46, 202, 136, 1);
      }

      .active2 {
        color: #fff !important;
        background: rgba(239, 83, 80, 1) !important;
      }

      .tab2 {
        flex: 1;
        background: rgba(240, 242, 247, 1);
        height: 60px;
        border-radius: 8px;
        color: rgba(239, 83, 80, 1);
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .price-box {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;
      font-size: 16px;

      .label {
        color: rgba(113, 63, 245, 1)
      }

      .value {
        color: rgba(113, 63, 245, 1);
      }
    }

    .van-cell {
      background: transparent;
      border: 2px solid rgba(113, 63, 245, 1);
      border-radius: 5px;
    }

    .amount-profit {
      display: flex;
      justify-content: flex-end;
      font-size: 16px;
      color: rgba(35, 37, 48, 1);
      margin: 10px 0;

      span {
        font-size: 16px;
        color: rgba(113, 63, 245, 1);
      }
    }


    .info-btn {
      display: flex;
      justify-content: space-between;

      div {
        flex: 0 0 48%;
        height: .6rem;
        font-size: .22rem;
        color: #fff;
        background: #F5435A;
        border-radius: 0.08rem;

        &:first-child {
          background: #00BA7E;
        }
      }
    }

    .info-buy-btn {
      margin-top: .2rem;
      height: 60px;
      opacity: 1;
      border-radius: 6px;
      background: rgba(113, 63, 245, 1);
      color: #fff;
    }
  }
}

.pay-success-box {
  width: 90%;
  max-width: 375px;
  background: transparent;

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;

    .business-buy {
      background: #fff;
      border-radius: 10px;
      min-height: 420px;
      width: 100%;
      padding: 20px 20px;
      .name-box{
        font-size: 18px;
        color: rgba(69, 70, 72, 1);
      }
    }

    .close {
      width: 50px;
      margin-top: 10px;
    }
  }

}

.mkd-pop {
  background: transparent !important;
  height: 95vh;
  max-width: 8.5rem;
  overflow: hidden;
  margin: 0 auto;
  transform: translate(-50%);
  left: 50%;
  padding-top: 10vh;

  .close {
    position: absolute;
    right: 10px;
    top: 0px;
    z-index: 999;
    width: 50px;
  }

  .van-action-sheet__content {
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    background: #fff;
  }

  .content {
    height: 100%;
    overflow: auto;
    background: #fff;
    position: relative;
    padding: 30px 10px;
  }
}
</style>
